OpenLayers.ImgPath = "theme/default/img/";

App.MapView = Backbone.View.extend({
   el: window,
   initialize: function() {
      this.render();
   },
   changelayer: function(layername) {
      switch (layername) {
         case 'Google Physical':
            console.log('p')
            this.map.setBaseLayer(this.gphysical);
         break;
         case 'Google Streets':
            console.log('s')
            this.map.setBaseLayer(this.gstreets);
         break;
         case 'Google Hybrid':
            console.log('h')
            this.map.setBaseLayer(this.ghybrid);
         break;
         case 'Google Satellite':
            console.log('st')
            this.map.setBaseLayer(this.gsat);
         break;
      }
   },
   render: function() {
      this.gphysical =  new OpenLayers.Layer.Google(
         "Google Physical",
         {type: google.maps.MapTypeId.TERRAIN}
      );
      this.gstreets =  new OpenLayers.Layer.Google(
         "Google Streets",
         {numZoomLevels: 20}
      );       
      this.ghybrid =  new OpenLayers.Layer.Google(
         "Google Hybrid",
         {type: google.maps.MapTypeId.HYBRID, numZoomLevels: 20}
      );
      this.gsat =  new OpenLayers.Layer.Google(
         "Google Satellite",
         {type: google.maps.MapTypeId.SATELLITE, numZoomLevels: 22}
      );
      this.map =  new OpenLayers.Map('map', {
         projection: 'EPSG:3857',
         layers: [this.gphysical, this.gstreets, this.ghybrid, this.gsat],
         theme: null,
         zoom: 5
      });
      this.map.setCenter(new OpenLayers.LonLat(10.2, 48.9).transform('EPSG:4326', 'EPSG:3857'));
   }
});

App.MainView = Backbone.View.extend({
   el: window,
   events: {
   },
   initialize: function() {
      this.map = new App.MapView();
      this.render();
   },
   _render_combobox: function() {
      that = this;
      $("#map-layers-selector").wijcombobox({
         data: [
            {label: 'Google Physical',   value: 'Google Physical'},
            {label: 'Google Streets',    value: 'Google Streets'},
            {label: 'Google Hybrid',     value: 'Google Hybrid'},
            {label: 'Google Satellite',  value: 'Google Satellite'}
         ],
         isEditable: false,
         selectedIndex: 0,
         //showTrigger: false,
         select: function (e, item) {
            console.log(item.label);
            that.map.changelayer(item.label);         
         }
      });   
   },   
   render: function() {
      this._render_combobox();
      $('#map-layers-select-dialog').wijdialog({
         autoOpen: true,
         captionButtons: {
            refresh: { visible: false}
         }
      });
   }
});

App.Main = new App.MainView;
